<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .show {
            width: 430px;
            height: 430px;
            border: 1px solid;
            background: url("../img/imgA_2.jpg");
        }

        ul {
            width: 300px;
            display: flex;
            justify-content: space-between;
            list-style: none;
            padding: 0;
            margin: 20px 0 0 0;
        }

        li {
            width: 60px;
            height: 60px;
            border: 1px solid;
        }

        li:hover {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="show"></div>
    <ul></ul>

    <script>
        let show = document.querySelector(".show");
        let ul = document.querySelector("ul"); // 小图列表
        let liArr = ul.children; // 所有小图 li

        let bigImgArr = ["imgA_2.jpg", "imgB_2.jpg", "imgC_2.jpg",];
        let smaImgArr = ["imgA_1.jpg", "imgB_1.jpg", "imgC_1.jpg",];

        ul.innerHTML = smaImgArr.map((item, index) => `<li data-id=${index}><img src='../img/${item}' ></li>`).join('');

        for (let i = 0; i < liArr.length; i++) {
            liArr[i].onmouseenter = function () {
                let index = liArr[i].dataset.id; // 0 1 2
                show.style.background = `url("../img/${bigImgArr[index]}")`;
            }
        }

        // for (let i = 0; i < liArr.length; i++) {
        //     liArr[i].onmouseenter = function () {
        //         show.style.background = `url("../img/${bigImgArr[i]}")`;
        //     }
        // }

    </script>
</body>

</html>